/*----------------------------------------*\
  LOGO
\*----------------------------------------*/

.logo {
  @apply flex items-center flex-nowrap;
  @apply md:items-start;
  @apply transition-opacity duration-700;

  .body--mobile-menu-is-open & {
    @apply opacity-0;
  }
}

.logo-title__container {
  @apply flex;
  @apply flex-col;

  .badge-easy-language {
    @apply badge badge--green mt-1 -ml-[1px];
    @apply w-fit;
    @apply font-bold;
    @apply hidden;
    @screen md {
      @apply block;
    }
  }

  .badge-sign-language {
    @apply badge badge--indigo mt-1 -ml-[1px];
    @apply w-fit;
    @apply font-bold;
    @apply hidden;
    @screen md {
      @apply block;
    }
  }
}

.logo--print-hidden {
  @apply flex print:hidden;
}

.logo--print-only {
  @apply hidden print:flex;
}

.logo__flag {
  @apply flex-shrink-0;
  @apply w-[30px] h-[33px];
  @apply lg:w-[32px] lg:h-[34px];
  @apply 3xl:w-[40px] 3xl:h-[44px];
}

.logo__freebrand {
  @apply h-[40px];
  @apply lg:h-[60px];
  @apply 3xl:h-[80px];
}

.logo__name {
  @apply flex-shrink-0 hidden overflow-visible xl:block;
  @apply w-[174px] h-[50px];
  @apply 3xl:w-[244px] 3xl:h-[70px];
}

.logo__separator {
  @apply w-px h-10 md:h-14 3xl:h-[70px];
  @apply mr-2 sm:mr-4 lg:mr-6 3xl:mr-8;
  @apply ml-2 sm:ml-4 lg:ml-6 3xl:ml-8;
  @apply bg-[#D1D5DB] overflow-visible;
}

.logo__title {
  @apply sr-only xs:not-sr-only;
  @apply md:whitespace-nowrap;
  @apply text-sm xs:text-xs sm:text-sm xl:text-base 3xl:text-lg;
  @apply font-bold leading-snug;
  @apply relative mt-[-0.160rem];
}

.logo__accronym {
  @apply font-bold leading-snug xs:hidden;
}
